<!--
    新版本用于新客竞赛排行-接口返回无数据时显示组件
    @Author：fanweilun
    @Date：20200615
 -->
<template>
  <!-- <div class='searchFundWrap'>
    <input class="fundSearchIpt" type="text" v-model="searchName" :placeholder="searchPrompt">
    <img  class="fundSearchIcon" src="./searchIcon.png" alt="搜索小图标">
    <div class="fundSearchBtn" @click="keyWordsSearch">搜索</div>
  </div> -->
          <!-- 搜索框 -->
  <div class='searchFundWrap' :class="{isAndroid:this.androidXd}">
    
        <!-- 监听回车事件 -->
      <input class="fundSearchIpt" :class="{iconRight:isRightIcon}" type="text" v-model="searchName" :placeholder="searchPrompt" maxlength="50" v-if="searchInputEnterActive" @keyup.13="search">

        <!-- 不监听回车事件 -->
      <input class="fundSearchIpt" :class="{iconRight:isRightIcon}" type="text" v-model="searchName" :placeholder="searchPrompt" maxlength="50" v-if="!searchInputEnterActive">

      <i class="iconfont fundSearchIcon" :class="{rightIcon:isRightIcon}">&#xe66f;</i>
      <div class="fundSearchBtn" @click="searchBtnActive" htmdEvt='fund_search_btn'>{{searchBtnTxt}}</div>
  </div>
</template>
<script>

// import $ from 'jquery'
  export default {
    name: "UrlNoData",
    props:{

        //输入框的placeholder
        searchPrompt: {
            type: String,
        },

        searchData: {
            type: String,
        },  

        //输入框右边的按钮
        searchBtnTxt: {
            type: String,
        },

        searchInputEnterActive: {
            type: Boolean
        },

        //搜索图标在右侧
        isRightIcon: {
            type: Boolean,
            
        }
    },
    data(){
      return {
        searchName: '',
        androidXd: false, //粘性定位，用于ios除外设备
      }
    },


    watch:{
        //监听外部传参的变化
        'searchData': function(newVal,oldVal){
            this.searchName = newVal
        },
    },

    methods:{

        //点击按钮
        searchBtnActive(){
            if( this.searchBtnTxt == '取消'){
                //触发父组件的close方法，关闭弹窗
                this.$parent.close()
            }
            else{
                //触发父组件的 searchBtnActive方法
                this.$parent.searchEnterActive(this.searchName)
            }
            
        },

        //回车，触发父组件的 searchEnterActive方法
        search(){
            this.$parent.searchEnterActive(this.searchName)
        }
    }
  }
</script>
<style lang="less">
.searchFundWrap{
    padding: .6rem 0;
    display: flex;
    background-color: #fff;
    position: relative;
    input::-webkit-input-placeholder {
        color: #C1C5CE;
        font-size: 0.75rem  /* 30/40 */;
        line-height: .8rem;
    }
    .fundSearchIpt{
        width: 15.75rem;
        height: 1.6rem;
        margin-left: .5rem;
        border: .025rem solid #E7E7E7;
        border-radius: .8rem;
        text-indent: 1.85rem;
        font-size:.8rem;
        //color: #C1C5CE ;
    }
    .iconRight{text-indent: .5rem;}
    .fundSearchIcon{
        position: absolute;
        top: 50%;
        margin-top: -0.4rem;
        // transform: translateY(-15%);
        left: 1.3rem;
        width: 0.8rem  /* 32/40 */;
        height: .8rem;

    }
    .rightIcon{right: 2.8rem;left: inherit;}
    .fundSearchBtn{
        height: 1.6rem;
        line-height: 1.6rem;
        margin-left: .5rem;
        font-size: .7rem;
        font-weight: 500;
        color:#545861  ;
    }
}
</style>
